<template>
  <div class="temp4-list" :class="isShow?'':'hide'">
    <p id="theme" class="theme">{{title}}</p>
    <div class="intro" v-click="onSelect">
      <div v-for="(d,i) of list" class="row_01" :key="d.id" :data-id="d.id" :data-index="i">
        <div class="introLeft"><img :src="getImgUrl(d.url||d.img_url)"></div>
        <div class="introRight">
          <div class="title">
            <div class="zuo">{{d.title}}</div>
            <div class="you">{{getTime(d)}}</div>
          </div>
          <div class="main">{{getHtmlTextContent(d.abstract)}}</div>
        </div>
      </div>
    </div>
    <div class="buttons">
      <button class="btn" v-click="()=>{$emit('goIndex')}">返回<br>首页</button>
    </div>
  </div>
</template>

<script>
import scopeElements from '@/modules/corejs/dom/scope-elements'
import ajaxApi from '@/modules/ajax-api'
export default {
  props: {
    isShow: Boolean
  },
  data () {
    return {
      type: '',
      list: []
    }
  },
  // created () {
  //   this.loadData(this.classid)
  // },
  // beforeRouteEnter (to, from, next) {
  //   next(vm => {
  //     vm.loadData(vm.classid)
  //   })
  // },
  computed: {
    title () {
      return {
        getActivityList: '特色活动',
        getSafetyEduList: '安全教育',
        getThemeMeetingList: '主题班会',
        getMicroReadList: '微阅读'
      }[this.type]
    }
  },
  methods: {
    loadData (type) {
      this.type = type
      ajaxApi.getListASTM(type).then(data => {
        this.list = data.data
      })
    },
    onSelect (e, vnode) {
      let { target } = e
      let rootElm = vnode.elm
      scopeElements(target, (elem) => {
        if (rootElm === elem) return false
        let { classList } = elem
        if (classList.contains('row_01')) {
          let { id, index } = elem.dataset
          // this.$router.push({
          //   name: 'temp2article',
          //   params: {
          //     type: this.type,
          //     classid: this.classid,
          //     id,
          //     index,
          //     list: this.list
          //   }
          // })
          this.$emit('goArticle', {
            type: this.type,
            id,
            index,
            list: this.list
          })
          return false
        }
      })
    },
    getImgUrl (url) {
      if (url) {
        return url.split(',')[0]
      }
    },
    getTime (d) {
      return (d.start_time || d.stage_time || d.meet_time || d.created_on).split('T')[0]
    },
    getHtmlTextContent (html) {
      let div = document.createElement('div')
      div.innerHTML = html
      return div.textContent
    }
  }
}
</script>

<style scoped>
.temp4-list {
  height: 1480px;
  padding: 0 40px;
  /* position: relative; */
  position: absolute;
  top: 25px;
  left: 0;
}
.hide {
  opacity: 0;
  pointer-events: none;
}
.theme {
  text-align: center;
  font-size: 30px;
  height: 55px;
  line-height: 1.7;
  /*height: 80px;*/
  /*line-height: 100px;*/
  border-bottom: solid 1px #eee;
}

.intro {
  width: 880px;
  height: 1340px;
  overflow: hidden;
  overflow-y: auto;
}

.intro .row_01 {
  width: 860px;
  height: 155px;
  margin-top: 35px;
}

.introLeft {
  width: 250px;
  height: 155px;
  margin-right: 20px;
  float: left;
}

.introLeft img {
  width: 250px;
  height: 155px;
  border-radius: 5px;
}

.introRight {
  width: 590px;
  height: 155px;
  float: left;
}

.title {
  font-size: 32px;
  width: 590px;
}

.title .zuo {
  float: left;
  color: #333;
}

.title .you {
  text-align: right;
  font-size: 24px;
  color: #999;
}

.main {
  clear: both;
  margin-top: 50px;
  font-size: 28px;
  text-align: justify;
  color: #666;
  overflow: hidden;
  height: 70px;
}

.buttons {
  position: absolute;
  /*bottom: -10px;*/
  bottom: 15px;
  left: 0;
  z-index: 1;
  cursor: pointer;
}

.buttons button {
  width: 100px;
  height: 70px;
  background-color: rgba(245, 178, 51, 0.8);
  color: #fff;
  border-radius: 5px;
  border: none;
  font-size: 20px;
  margin-right: 20px;
  float: left;
}

.buttons .btn {
  position: absolute;
  left: 760px;
  bottom: 0;
}
</style>
